<template>
  <div class="qualiy_list">
    <div class="monitor-tree">
      <h3 class="tree-title">选择洞幅</h3>
      <el-tree
        :data="tunnelInfoChild"
        @check-change="treeCheckClick"
        :check-on-click-node="true"
        :default-expanded-keys="keysListNodeData"
        node-key="pid"
        ref="tree"
        @node-click="nodetest"
      ></el-tree>
    </div>

    <div class="monitor-list">
      <MonitorInfoHeaderVue />
      <el-table :data="cDataList" :cell-style="{'text-align':'center'}" :header-cell-style="{background: '#f8f8f9',textAlign: 'center'}" >
        <el-table-column width="80" show-overflow-tooltip prop="id"  label="序号"></el-table-column>
        <el-table-column width="100" show-overflow-tooltip :formatter="formatDate" prop="measurementTime" label="测量时间"></el-table-column>
        <el-table-column width="120" show-overflow-tooltip prop="numTime" label="累计测量时间"></el-table-column>
        <el-table-column width="120" show-overflow-tooltip prop="headerValue" label="测量值"></el-table-column>
        <el-table-column  show-overflow-tooltip prop="headerTodaySink" label="当日下沉"></el-table-column>
        <el-table-column  show-overflow-tooltip prop="headerNumSink" label="累计下沉"></el-table-column>
        <el-table-column show-overflow-tooltip label="操作">
          <template slot-scope="scope">
            <el-button icon="el-icon-edit" size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button icon="el-icon-delete" size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
          
      <el-pagination
        background
        @current-change="handleCurrentChange"
        layout="total, sizes, prev, pager, next, jumper"
        :total="currentPage.total"
      ></el-pagination>
    </div>
    <!-- 更新 -->
    <MonitorEditor :flag="flag" />
    <MonitorInfoUpload :flag="flag" />
  </div>
</template>

<script>
import api from '../../../api'
import qs from 'qs'
import MonitorEditor from './MonitorEditor.vue'
import MonitorInfoUpload from './MonitorInfoUpload.vue'
import MonitorInfoHeaderVue from './MonitorInfoHeader.vue'


export default {
  data() {
    return {
      keysListNodeData:[],
      wId: '', // 洞幅id
      tunnelInfoChild: [],
      cDataList: [],
      flag: false,
      currentPage: {
        pageNo: 1,
        total: 0
      }
    }
  },
  components: {
    MonitorEditor,
    MonitorInfoHeaderVue,
    MonitorInfoUpload
  },
  mounted() {
    this.getchildren()
    this.$bus.$on('onRefreshmonitorMeasuremen', (flag) => {
      this.http(flag.pageNo, flag.wId, flag.sId)
      this.currentPage.pageNo = flag.pageNo
    })
  },
  methods: {
    //获取数结构
    getchildren() {
      api
        .tunnelWidthFindByClid()
        .then((res) => {
          if (res.data.code == 2001) {
            this.tunnelInfoChild = res.data.data
            const arrDat = res.data.data[0].pid
            this.keysListNodeData.push(arrDat)
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    http(page, wid, sId,tId) {
      api
        .monitorMeasurementqueryAllByPage({ page, wid, sId ,tId})
        .then((res) => {
          if (res.data.code == 2001) {
            this.cDataList = res.data.data.records
            this.currentPage.total = parseInt(res.data.data.total)
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    handleEdit(index, row) {
      this.$bus.$emit('onShowMonitorInfoEditor', { rowData: row, wId: this.wid,pageNo:this.currentPage.pageNo })
    },
    handleDelete(index, row) {
      let data = {
        id: row.id
      }
      this.$confirm('此操作将永久删除数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        customClass: 'del-model',
        type: 'warning'
      })
        .then(() => {
          api
            .monitorMeasurementdeleteById(qs.stringify(data))
            .then((res) => {
              if (res.data.code == 2001) {
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                })
                // 视图重绘
                this.http(1, this.wId)
              } else {
                this.$message({
                  type: 'fail',
                  message: '删除失败!'
                })
              }
            })
            .catch((err) => {
              console.log(err)
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    handleCurrentChange(row) {
      this.http(row, this.wId)
    },
    treeCheckClick(data, checked, node) {
      if (data.id != undefined) {
        this.wId = data.id
        this.http(1, this.wId)
        this.$bus.$emit('onAddMonitorInfoWid', this.wId)
      }
    },
    formatDate(row, column) {
      // 获取单元格数据
      let data = row[column.property]
      if (data == null) {
        return null
      }
      let dt = new Date(data)
      return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate()
    },
    nodetest(data, checked, node){
      if (data.tid != undefined) {
        this.http(1,null,null,data.tid)
      }
    }
  }
}
</script>

<style scoped>


.tree-title {
  text-align: left;
  font-size: 16px;
  color: #606266;
  padding: 10px;
  padding-bottom: 20px;
}
.monitor-tree {
  width: 300px;
  border-left: 1px solid #f1f1f1;
  border-right: 1px solid #f1f1f1;
  background-color: #fff;
}
.monitor-list {
  flex:1;
  margin-left: 10px;
  width: 100%;
}
</style>